import type { DataTableProps } from "naive-ui";
import { NImage } from "naive-ui";
import { h } from "vue";
import { ORDER_STATUS_COLOR_MAP, ORDER_STATUS_MAP, } from "@/const/order";
import { formatTime, renderTicketInfo } from "@/utils";
import { GOODS_TYPE_MAP } from '@/const/goods'

export const orderColumns: DataTableProps["columns"] = [
	{
		title: '封面',
		key: 'goodsHeadImg',
		width: 100,
		render: item => h(NImage, {
			src: item.goodsHeadImg,
			height: 40,
			objectFit: 'contain',
		})
	},
	{
		title: '商品名称',
		key: 'goodsName',
		width: 180,
		ellipsis: {
			tooltip: true,
			lineClamp: 2,
		}
	},
	{
		title: '交易类型',
		key: 'goodsType',
		width: 100,
		render(item: any) {
			return h('div', {
				style: {
					color: item.goodsType === 0 ? 'var(--success-color-hover)' : 'var(--warning-color)',
				}
			}, [GOODS_TYPE_MAP[item.goodsType]])
		}
	},
	{
		title: '价格(￥)',
		key: 'goodsPrice',
		width: 100,
		ellipsis: {
			tooltip: true,
		}
	},
	{
		title: '加一手(￥)',
		key: 'stepBiddingPrice',
		width: 100,
		render: item => item.stepBiddingPrice || 0
	},
	{
		title: '运费(￥)',
		key: 'postFee',
		width: 100,
		render: item => item.postFee
	},
	{
		title: '实际支付(￥)',
		key: 'orderSumPayPrice',
		width: 140,
		ellipsis: {
			tooltip: true,
		}
	},
	{
		title: '订单状态',
		key: 'orderStatus',
		width: 100,
		render(item: any) {
			return h('div', {
				style: {
					color: `var(${ORDER_STATUS_COLOR_MAP[item.orderStatus]})`,
				}
			}, [ORDER_STATUS_MAP[item.orderStatus]])
		}
	},
	{
		title: '订单号',
		key: 'orderId',
		width: 280,
		ellipsis: {
			tooltip: true,
		}
	},
	{
		title: '下单时间',
		key: 'createTime',
		width: 190,
		render: item => formatTime(item.createTime)
	},
	{
		title: '物流信息(运单号)',
		key: 'ticketInfo',
		width: 220,
		render: item => renderTicketInfo(item)
	},
]
